<template>
    <div id="page-message-detail">
        <div ref="new_breadcrumb" class="new_breadcrumb">位置：消息中心</div>
        <div class="new_center">
            <ul class="search-result"
                ref="search-result"
                v-loading="loading"
                element-loading-text="拼命加载中...">
                <li class="no-result" v-if="!loading&&searchResultList.length===0">
                    <p>暂无结果</p>
                </li>
                <!--<li class="no-result" v-if="searchResultList.length===0&&$store.state.searchResultType==2">
                    <p>当前没有订阅的标讯信息</p>
                    <p @click="displaySubscriber"><i class="icon icon-subscriber"></i><span>订阅器</span></p>
                </li>
                <li class="no-result" v-if="searchResultList.length===0&&$store.state.searchResultType==3">
                    <p>当前没有收藏的标讯信息</p>
                    <p @click="tabPageType(1)"><i class="icon icon-heart"></i><span>去收藏</span></p>
                </li>-->
                <li v-for="(item,index) in searchResultList"
                    :key="item.id"
                >
                    <div :class="{active:item.isAttention}" @click="collection(index,item.id,item.isAttention)" class="collection">
                        <i class="icon-heart"></i>
                        <span>收藏</span>
                    </div>
                    <div @click="goDetail(item.id)" class="title" title="点击查看详情" v-html="item.title">
                    </div>
                    <ul class="tags-list">
                        <li class="item tag-color-1" v-if="item.announcementTypeName">
                            {{item.announcementTypeName}}
                        </li>
                        <li class="item tag-color-1" v-if="item.purchaseTypeName">
                            {{item.purchaseTypeName}}
                        </li>
                        <li class="item tag-color-2" v-if="item.province">
                            {{item.province}}
                        </li>
                        <li class="item tag-color-2" v-if="item.purchaserName">
                            {{item.purchaserName}}
                        </li>
                        <!--<li class="item tag-color-3" v-for="item2 in item.esItemAis" :key="item2.item1Code" v-if="item2.item1Name">
                            {{item2.item1Name}}
                        </li>-->
                        <li class="item tag-color-4" v-if="item.bidMoney">
                            中标 {{item.bidMoney/1000000+'万元'}}
                        </li>
                        <li class="item tag-color-4" v-if="item.budgetMoney">
                            预算 {{item.budgetMoney/1000000+'万元'}}
                        </li>
                    </ul>
                    <div class="content" v-if="searchMethod==1">
                        {{item.projectInfo}}
                    </div>
                    <div class="content" v-if="searchMethod==2" v-html="item.pureContent">
                    </div>
                    <div class="content-keywords">
                        <span class="date" v-if="item.projectDate">公告日期：{{item.projectDate.substring(0,10)}}</span>
                        <span class="company winning-bidder" v-if="item.agencyName">{{item.agencyName}}</span>
                        <span class="company purchaser" v-if="item.companyName">{{item.companyName}}</span>
                    </div>
                </li>
            </ul>
            <div v-if="searchResultList.length>0" class="pagination-wrap">
                <el-pagination
                    :current-page="listPageNum"
                    :page-size="listPageSize"
                    :pager-count="11"
                    :total="listPageTotal"
                    background
                    class="search-result-pagination"
                    layout="prev, pager, next"
                    next-text="下一页 >"
                    prev-text="< 上一页"
                    @current-change="handleCurrentChange"
                >
                </el-pagination>
            </div>
        </div>
        <dialog-box
            v-if="cancelCollectionShow"
            @closeDialogBox="closeDialogBox"
            cancel-text="再想想"
            confirm-text="取消收藏"
            sign-text="是否取消收藏这条标讯信息？"
        >
        </dialog-box>
    </div>
</template>

<script>
export default {
    name: "messageDetail",
    data() {
        return {
            loading:false,
            noticeData: '',
            searchResultList:[],
            searchMethod:1,
            cancelCollectionShow:false,
            listPageNum: 1,//当前页
            listPageSize: 10,//单页数据数
            listPageTotal: null,//总数据数量

        };
    },
    methods: {
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.listPageNum = val;
            this.getSearchResult(this.$route.query.time);
            this.$refs['new_breadcrumb'].scrollIntoView({
                behavior: "instant",
                block: "start",
                inline: "nearest"
            });
        },
        getNoticeData() {
            var data = {
                id: this.$route.query.id
            }
            this.$request.currency(data).then(res => {
                console.log(res)
                if (res.status == 200) {
                    this.noticeData = res.data
                } else {
                    this.requestError(res.status, res.message)
                }
            }, err => {
                console.log(err);
                this.requestFail(err);
            })
        },
        getSearchResult(time=""){
            this.loading = true;
            this.$request.queryBidTitleInSubscribe({
                endPushTime:time,
                pageNum: this.listPageNum-1,//当前页
                pageSize: this.listPageSize,//单页数据数
            }).then(res => {
                console.log(res)
                this.loading = false;
                if (res.status == 200) {
                    this.searchResultList = res.data.content;
                    this.listPageTotal = res.data.totalElements;
                } else {
                    this.requestError(res.status, res.message)
                }
            }, err => {
                console.log(err);
                this.requestFail(err);
            })
        },
        collection(index,id,isCollect=false){
            if (isCollect){
                this.preCancelBidIndex = index;
                this.preCancelBidId = id;
                // this.$store.commit('changeDialogBoxShow',true);
                this.cancelCollectionShow = true;
            }else {
                this.$request.addBidAttention({
                    bidId:id
                }).then(res => {
                    console.log(res);
                    if (res.status == 200) {
                        this.searchResultList[index].isAttention = 1;
                        this.$message({
                            type: 'success',
                            message: '收藏成功！'
                        });
                    } else {
                        this.requestError(res.status, res.message);
                    }
                }, err => {
                    console.log(err);
                    this.requestFail(err);
                });
            }
        },
        goDetail(id){
            // console.log(id);
            let {href} = this.$router.resolve({
                path: `/detail/${id}`
            });
            window.open(href, '_blank')
        },
        closeDialogBox(res){
            if(res.cancel||res.close){
                this.$message({
                    type: 'info',
                    message: '已取消本次操作！'
                });
            }else if (res.confirm) {
                this.$request.cancelBidAttention({
                    bidId:this.preCancelBidId
                }).then(res => {
                    console.log(res);
                    if (res.status == 200) {
                        this.$message({
                            type: 'success',
                            message: '已取消收藏这条标讯！'
                        });
                        if(this.$store.state.searchResultType==3){
                            this.searchResultList.splice(this.preCancelBidIndex,1);
                        }else {
                            this.searchResultList[this.preCancelBidIndex].isAttention = 0;
                        }
                    } else {
                        this.requestError(res.status, res.message);
                    }
                }, err => {
                    console.log(err);
                    this.requestFail(err);
                });
            }
            this.cancelCollectionShow = false;
        },
    },
    mounted() {
        // this.getNoticeData()
        this.getSearchResult(this.$route.query.time);
    }
};
</script>

<style scoped lang="less">
.new_breadcrumb {
    width: 100%;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 2px;
    color: #252627;
    background: #ffffff;
    line-height: 58px;
    padding-left: 20px;
}

.new_center {
    width: 100%;
    margin-top: 10px;
    background: #ffffff;
    overflow: hidden;
}

.new_center .new_title {
    font-size: 28px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 76px;
    letter-spacing: 0px;
    color: #252627;
    margin-top: 10px;
    text-align: center;
    border-bottom: solid 1px #e6e6e6;
}

.new_content {
    padding: 40px 30px;
}

.new_content p {
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 30px;
    letter-spacing: 0px;
    color: #252627;
}
ul.search-result {
    font-family: AlibabaPuHuiTiR;
    .min-height(300px);
    
    & > li {
        position: relative;
        padding: 30px 20px;
        border-bottom: 1px solid #EBEBEB;
        
        &.no-result{
            border: none;
            text-align: center;
            margin-top: 100px;
            .fz(18px);
            .color(#757575);
            line-height: 50px;
            
            i{
                &.icon-subscriber{
                    .size(20px,20px);
                    .bg('@{img-base-url}subscriber_icon-shopping-active.png');
                }
                &.icon-heart{
                    .size(17px,15px);
                    .bg('@{img-base-url}search-result_icon-heart-active-empty.png');
                }
                
                &+span{
                    .color(@main-color);
                    cursor: pointer;
                }
            }
        }
        .collection {
            position: absolute;
            top: 30px;
            right: 20px;
            .color(#888888);
            .fz(16px);
            cursor: pointer;
            i {
                display: inline-block;
                .size(16px, 12px);
                /*background: url("../assets/img/search-result_icon-heart.png");*/
                .bg("@{img-base-url}search-result_icon-heart.png");
                vertical-align: middle;
                margin-right: 2px;
            }
            &.active{
                .color(@main-color);
                i{
                    .bg("@{img-base-url}search-result_icon-heart-active.png");
                }
            }
            
        }
        
        .title {
            .fz(16px);
            .max-width(850px);
            cursor: pointer;
            /*line-height: 25px;*/
            .ellipsis;
        }
        
        ul.tags-list {
            @ml: 10px;
            .clearfix;
            .color(#ffffff);
            margin-left: -@ml;
            
            & > li {
                .fl;
                .fz(14px);
                padding: 5px 10px;
                .border-radius;
                margin-left: @ml;
                margin-top: 20px;
                
            }
        }
        
        .content {
            .fz(14px);
            .color(#888888);
            line-height: 24px;
            margin-top: 19px;
        }
        
        .content-keywords {
            @ml: 34px;
            .fz(14px);
            margin-top: 19px;
            margin-left: -@ml;
            
            span {
                margin-left: @ml;
            }
        }
    }
}
.pagination-wrap {
    .clearfix;
    margin-top: 80px;
    margin-right: 20px;
    margin-bottom: 50px;
}
</style>
<style lang="less">
.search-result-pagination {
    .fr;
    padding: 0;

    .btn-prev, .btn-next {
        .size(79px, 36px);
        .fz(14px) !important;
        .color(#252627) !important;
        background-color: #ffffff !important;
        border: 1px solid #EBEBEB !important;

        &:disabled {
            .color(#C0C4CC) !important;
        }
    }

    .el-pager {
        li {
            .min-width(36px) !important;
            .lh(36px);
            .fz(20px);
            .color(#888888) !important;
            font-weight: lighter;
            .border-radius(4px) !important;
            background-color: #ffffff !important;
            border: 1px solid #EBEBEB !important;

            &.active {
                background-color: @main-color !important;
                .color(#ffffff) !important;
            }

            &.el-icon-more {
                border: none !important;
                &.btn-quicknext,&.btn-quicknext+li{
                    //display: none !important;
                }
            }

            &.el-icon-d-arrow-right, &.el-icon-d-arrow-left {
                border: none !important;
                .color(@main-color) !important;
            }
        }
    }
}
</style>